import React, { ReactElement } from 'react';
import {
  AtButton,
  AtForm,
  AtInput,
  AtMessage,
} from 'taro-ui';
import './register.scss';

interface Props {
  setName: (username: string) => void;
  setPassword: (password: string) => void;
  setPasswordAgain: (password: string) => void;
  handleRegister: () => void;
}

const perfix = 'register_view';

const RegisterView = ({
  setName,
  setPassword,
  handleRegister,
  setPasswordAgain,
}: Props): ReactElement => (
  <div className={`${perfix}_warpper`}>
    <AtForm>
      <AtInput
        name="value"
        title="用户名"
        type="text"
        placeholder="请输入用户名"
        onChange={(value) => setName(value as string)}
      ></AtInput>

      <AtInput
        name="value"
        title="密码"
        type="password"
        placeholder="请输入密码"
        onChange={(value) => setPassword(value as string)}
      ></AtInput>

      <AtInput
        name="value"
        title="确认密码"
        type="password"
        placeholder="请输入确认密码"
        onChange={(value) =>
          setPasswordAgain(value as string)
        }
      ></AtInput>

      <AtButton
        size="small"
        type="primary"
        onClick={handleRegister}
      >
        注册
      </AtButton>
    </AtForm>

    <AtMessage />
  </div>
);
export default RegisterView;
